<template>
    <view class="l-sticky l-class">
        <slot></slot>
    </view>
</template>

<script>
import validator from '../behaviors/validator';
export default {
    unicomGroup: ['sticky-item'],
    externalClasses: ['l-class'],
    mixins: [validator],
    relations: {
        '../sticky-item/index': {
            type: 'child',
            linked() {
                this.checkSupportCssSticky()
                    .then((t) => {
                        t || this.updateStickyItemsSizeData();
                    })
                    .catch((t) => {
                        console.error(t);
                    });
            },
            linkChanged() {
                this.checkSupportCssSticky()
                    .then((t) => {
                        t || this.updateStickyItemsSizeData();
                    })
                    .catch((t) => {
                        console.error(t);
                    });
            },
            unlinked() {
                this.checkSupportCssSticky()
                    .then((t) => {
                        t || this.updateStickyItemsSizeData();
                    })
                    .catch((t) => {
                        console.error(t);
                    });
            }
        }
    },
    props: {
        mode: {
            type: String,
            default: 'js',
            options: ['js', 'css']
        },
        scrollTop: Number
    },
    watch: {
        scrollTop: function () {
            this.checkSupportCssSticky()
                .then((t) => {
                    t || this.updateStickyItemsPosition();
                })
                .catch((t) => {
                    console.error(t);
                });
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this.checkSupportCssSticky()
                .then((t) => {
                    t || this.initSticky();
                })
                .catch((t) => {
                    console.error(t);
                });
        },

        initSticky() {
            uni.lin = uni.lin || {};
            uni.lin.flushSticky = () => {
                this.updateStickyItemsSizeData();
            };
            uni.lin.setScrollTop = (t) => {
                this.scrollTop = t;
                this.checkSupportCssSticky()
                    .then((t) => {
                        t || this.updateStickyItemsPosition();
                    })
                    .catch((t) => {
                        console.error(t);
                    });
            };
        },

        updateStickyItemsPosition() {
            const t = this.getStickyItemNodes();
            for (let e of t) {
                e.updateStickyItemPosition(this.scrollTop);
            }
        },

        updateStickyItemsSizeData() {
            this.getStickyItemNodes().forEach((t, e) => {
                t.updateStickyItemBaseData(e);
            });
        },

        getStickyItemNodes() {
            return this.getRelationNodes('sticky-item');
        },

        checkSupportCssSticky() {
            return new Promise((t) => {
                const e = this.getStickyItemNodes();
                if (0 === e.length) {
                    t(false);
                }
                uni.createSelectorQuery()
                    .in(e[0])
                    .select('.l-sticky-item-header')
                    .fields({
                        computedStyle: ['position']
                    })
                    .exec((e) => {
                        if (null === e[0]) {
                            t(false);
                        } else {
                            t('sticky' === e[0].position);
                        }
                    });
            });
        }
    },
    created: function () {}
};
</script>
<style></style>
